<template>
    <div class="detail-rotation" @click="handleClose">
        <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide
                    v-for="item in dt"
                    :style="{backgroundImage: 'url('+item+')'}"
            ></swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    import Swiper, { Navigation, Pagination } from 'swiper'
    Swiper.use([Navigation, Pagination])
    export default {
        props: ['dt','idx'],
        name: "DetailRotation",
        data() {
            return {
                swiperOptions: {
                    pagination: {
                        el: '.swiper-pagination',
                        type: 'fraction'
                    },
                    observer:true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents:true//修改swiper的父元素时，自动初始化swiper
                }
            }
        },
        methods: {
            handleClose() {
                this.$emit('close')
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },
        mounted() {
            this.swiper.slideTo(this.idx, 0, false)
        }
    }
</script>

<style scoped>

    .detail-rotation {
        position: fixed;
        width: 100%;
        top: 0;
        bottom: 0;
        background: black;
        color: white;
        display: flex;
        align-items: center;
    }

    .swiper-container {
        width: 100%;
        height: 240px;
        --swiper-pagination-color: white;
    }
    .swiper-slide {
        background-size: cover;
    }

</style>